<template>
 <Scroll ref="scrolldata" class="tab-menu" :probe-type= "3" :pull-up-load="true">
       <div class="menu-item" 
       v-for="(item, i) in childCategoriesData" 
       :key="i" 
       :class="{isActiveClass:i === currentIndex}"
        @click="menuClick(i)">{{item.title}}
        </div>
</Scroll>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
export default {
    name: 'SideTabMenu', // 侧菜单选项卡
    components: {
      Scroll
    },
    data() {
      return {
        currentIndex: 0   
      }
    },
    props: {
      childCategoriesData: {
          type: Array,
          default() {
              return []
          }
      }
    },
    methods: {
      menuClick(i) {
          this.currentIndex = i
          this.$emit('isMenuClick', i)
      }
    },
     // 进入组件时监听
   activated() {
     console.log('YESYES');
    this.$refs.scrolldata.refresh()
  }, 

}
</script>

<style scoped>
.tab-menu {
  width: 30%;
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}
.menu-item{
  padding: 0 10px;
  line-height: 45px;
  text-align: center;
  font-size: 15px;
  background-color: #e4e4e473;
}
.isActiveClass{
  background-color: #e4e4e4db;
  color: #d43c9ccc;
  font-weight: bold;
}
</style>